<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        em{
            font-style: italic;
            font-size: 30px;
        }
        tr:hover{
            background-color: #79bbff;
        }
        table
        {
            text-align: center;
        }
        td{
            height: 30px;
        }
        th{
            background-color:#fc5531;
            color: white;
            height: 30px;
        }
        span{
            color: #fc5531;
            font-size: 20px;
            font-style: italic;
        }
        a{
            color: #79bbff;
        }
    </style>
</head>
<body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    var curPage1 = 1; //当前页码
    var curPage2 = 1; //当前页码
    var total1, pageSize1, totalPage1;
    var total2, pageSize2, totalPage2;
    function search() {
        if ($("#UserName").val()!=""){
            $.ajax({
                type: "Get",
                url: "SearchUserServlet",
                dataType:"json",
                data: {
                    "UserName": $("#UserName").val(),
                },
                success: function (result) {
                    $("#err").empty();
                    $("#showDiv table").empty();
                    $("#f").empty();
                    if (result[result.length-1].judge=="inExistence"){
                        $("#err").empty();
                        $("#err").append(
                            "<em style='color: red'>该用户名不存在！</em>"
                        );
                    }else{
                        $("#showDiv table").append(
                            "<tr><th>ID</th><th>用户名</th><th>密码</th><th>状态</th></tr>"
                        );
                    }
                    for(var i=0;i<result.length;i++)
                    {
                        if(result[i].state==0){
                            $("#showDiv table").append(
                                "<tr><td>"+result[i].userID+"</td><td id='nowName'>"+result[i].userName+"</td><td>"+result[i].password+"</td>" +
                                "<td id='state'>" +"<form>\n" +
                                "        <input type=\"radio\" name=\"state\" value=\"0\" checked>正常\n" +
                                "        <input type=\"radio\" name=\"state\" value=\"1\">封号\n" +
                                "        <input type=\"radio\" name=\"state\" value=\"2\">禁言\n" +
                                "    </form>"+"</td></tr>"
                            );
                        }
                        else if(result[i].state==1){
                            $("#showDiv table").append(
                                "<tr><td>"+result[i].userID+"</td><td id='nowName'>"+result[i].userName+"</td><td>"+result[i].password+"</td>" +
                                "<td id='state'>" +"<form>\n" +
                                "        <input type=\"radio\" name=\"state\" value=\"0\">正常\n" +
                                "        <input type=\"radio\" name=\"state\" value=\"1\" checked>封号\n" +
                                "        <input type=\"radio\" name=\"state\" value=\"2\">禁言\n" +
                                "    </form>"+"</td></tr>"
                            );
                        }
                        else if(result[i].state==2){
                            $("#showDiv table").append(
                                "<tr><td>"+result[i].userID+"</td><td id='nowName'>"+result[i].userName+"</td><td>"+result[i].password+"</td>" +
                                "<td id='state'>" +"<form>\n" +
                                "        <input type=\"radio\" name=\"state\" value=\"0\">正常\n" +
                                "        <input type=\"radio\" name=\"state\" value=\"1\">封号\n" +
                                "        <input type=\"radio\" name=\"state\" value=\"2\" checked>禁言\n" +
                                "    </form>"+"</td></tr>"
                            );
                        }
                    }
                },
            });
        }
        else {
            $("#err").empty();
            $("#err").append(
                "<em style='color: red'>请选择用户！</em>"
            )
        }

    }
    function search2(){
        if ($("#UserID").val()!=""){
            $.ajax({
                type: "Get",
                url: "SearchArticleServlet",
                dataType:"json",
                data: {
                    "UserID": $("#UserID").val(),
                },
                success: function (result) {
                    $("#err").empty();
                    $("#showDiv2 table").empty();
                    $("#f").empty();
                    $("#showDiv2 table").append(
                        "<tr><th>文章ID</th><th>用户ID</th><th>文章标题</th><th>文章内容</th><th>点赞数</th><th>收藏数</th><th>发布时间</th><th>浏览数</th><th>评论数</th></tr>"
                    );
                    for(var i=0;i<result.length;i++)
                    {
                        $("#showDiv2 table").append(
                            "<tr><td>"+result[i].articleID+"</td><td>"+result[i].userID+"</td><td>"+result[i].articleTitle+"</td><td>"+
                            result[i].articleContent+"</td><td>"+result[i].articleLike+"</td><td>"+result[i].articleFavorite+"</td><td>"+result[i].articleCreateTime+
                            "</td><td>"+result[i].articleView+"</td><td>"+result[i].articleComment+"</td></tr>"
                        );
                    }
                },
            });
        }
        else {
            $("#err").empty();
            $("#err").append(
                "<em style='color: red'>请选择用户！</em>"
            )
        }
    }
    function del(ArticleID){
        $.ajax({
            type: "Get",
            url: "delArticleServlet",
            dataType:"text",
            data: {
                "ArticleID": ArticleID,
            },
            success: function (result) {
                $("#err").empty();
                $("#err").append(
                    "<em style='color: red'>"+result+"</em>"
                )
            },
        });
    }
    function submit(){
        if ($("#nowName").val()!=undefined){
            $.ajax({
                type: "Get",
                url: "ChangeServlet",
                data:{
                    "state":$('input[name="state"]:checked').val(),
                    "NowName":$("#nowName").text()
                },
                success: function (result) {
                    $("#err").empty();
                    $("#err").append(
                        "<em style='color: red'>"+result+"</em>"
                    )
                }
            })
        }
        else {
            $("#err").empty();
            $("#err").append(
                "<em style='color: red'>请查询用户！</em>"
            )
        }

    }
    function findAll(page) {
        $.ajax({
            type: "Get",
            url: "AllUserServlet",
            data:{
                "pageNo":page
            },
            dataType:"json",
            success: function (result) {
                total1=result[result.length-1].total;
                pageSize1=result[result.length-1].pageSize;
                curPage1=result[result.length-1].page;
                totalPage1=result[result.length-1].totalPage;
                $("#UserName").val(null);
                $("#err").empty();
                $("#showDiv table").empty();
                $("#showDiv table").append(
                    "<tr><th>ID</th><th>用户名</th><th>密码</th><th>状态</th></tr>"
                );
                $("#f").append(
                    "<div class=\"col-md-5\" ></div>\n" +
                    "        <div class=\"col-md-7\" id=\"pageCount\"></div>"
                )
                for(var i=0;i<result.length-1;i++)
                {
                    if(result[i].state==0){
                        $("#showDiv table").append(
                            "<tr><td>"+result[i].userID+"</td><td>"+result[i].userName+"</td><td>"+result[i].password+"</td>" +
                            "<td id='state1'>" +"<form>\n" +
                            "        <input type=\"radio\" name=\"state1\" value=\"0\" checked>正常\n" +
                            "        <input type=\"radio\" name=\"state1\" value=\"1\">封号\n" +
                            "        <input type=\"radio\" name=\"state1\" value=\"2\">禁言\n" +
                            "    </form>"+"</td></tr>"
                        );
                    }
                    else if(result[i].state==1){
                        $("#showDiv table").append(
                            "<tr><td>"+result[i].userID+"</td><td>"+result[i].userName+"</td><td>"+result[i].password+"</td>" +
                            "<td id='state1'>" +"<form>\n" +
                            "        <input type=\"radio\" name=\"state1\" value=\"0\">正常\n" +
                            "        <input type=\"radio\" name=\"state1\" value=\"1\" checked>封号\n" +
                            "        <input type=\"radio\" name=\"state1\" value=\"2\">禁言\n" +
                            "    </form>"+"</td></tr>"
                        );
                    }
                    else if(result[i].state==2){
                        $("#showDiv table").append(
                            "<tr><td>"+result[i].userID+"</td><td>"+result[i].userName+"</td><td>"+result[i].password+"</td>" +
                            "<td id='state1'>" +"<form>\n" +
                            "        <input type=\"radio\" name=\"state1\" value=\"0\">正常\n" +
                            "        <input type=\"radio\" name=\"state1\" value=\"1\">封号\n" +
                            "        <input type=\"radio\" name=\"state1\" value=\"2\" checked>禁言\n" +
                            "    </form>"+"</td></tr>"
                        );
                    }
                }
            },
            complete:function (){
                getPageBar1();
            },
            error:function (){
                alert("数据加载失败！");
            }
        });
    }
    function findAllArticle(page){
        $.ajax({
            type: "Get",
            url: "allArticleServlet",
            data:{
                "pageNo":page
            },
            dataType:"json",
            success: function (result) {
                total2=result[result.length-1].total;
                pageSize2=result[result.length-1].pageSize;
                curPage2=result[result.length-1].page;
                totalPage2=result[result.length-1].totalPage;
                $("#UserName").val(null);
                $("#err").empty();
                $("#showDiv table").empty();
                $("#showDiv table").append(
                    "<tr><th>文章ID</th><th>用户ID</th><th>文章标题</th><th>文章内容</th><th>点赞数</th><th>收藏数</th><th>发布时间</th><th>浏览数</th><th>评论数</th><th>操作</th></tr>"
                );
                $("#f").append(
                    "<div class=\"col-md-5\" ></div>\n" +
                    "        <div class=\"col-md-7\" id=\"pageCount\"></div>"
                )
                for(var i=0;i<result.length-1;i++)
                {
                    $("#showDiv table").append(
                        "<tr><td>"+result[i].articleID+"</td><td>"+result[i].userID+"</td><td>"+result[i].articleTitle+"</td><td>"+
                        result[i].articleContent+"</td><td>"+result[i].articleLike+"</td><td>"+result[i].articleFavorite+"</td><td>"+result[i].articleCreateTime+
                        "</td><td>"+result[i].articleView+"</td><td>"+result[i].articleComment+"</td><td>"+"<button style='background-color: #fc5531;border:0px;border-radius: 10px' onclick='del("+result[i].articleID+")'><span style=\"color: #fff;font-size: 10px;\" >删除</span></button>"+"</td></tr>"
                    );
                }
            },
            complete:function (){
                getPageBar2();
            },
            error:function (){
                alert("数据加载失败！");
            }
        });
    }
    function getPageBar1() {
        //页码大于最大页数
        if (curPage1 > totalPage1)
            curPage1 = totalPage1;
        //页码小于1
        if (curPage1 < 1)
            curPage1 = 1;
        pageStr1 = "<span>共" + totalPage1 + "页</span><span>" + curPage1 + "/"
            + totalPage1 + "</span>";
        //如果是第一页
        if (curPage1 == 1) {
            pageStr1 += "<span>首页</span><span>上一页</span>";
        } else {
            pageStr1 += "<span><a href='javascript:findAll(1)' rel='1'>首页</a></span><span><a href='javascript:findAll("+(curPage1 - 1)+")' rel='"
                + (curPage1 - 1) + "'>上一页</a></span>";
        }
        //如果是最后页
        if (curPage1 >= totalPage1) {
            pageStr1 += "<span>下一页</span><span>尾页</span>";
        } else {
            pageStr1 += "<span><a href='javascript:findAll("+((curPage1) + 1)+")' rel='"
                + (parseInt(curPage1) + 1)
                + "'>下一页</a></span><span><a href='javascript:findAll("+totalPage1+")' rel='"
                + totalPage1 + "'>尾页</a></span>";
        }
        $("#pageCount").html(pageStr1);
    }
    function getPageBar2() {
        //页码大于最大页数
        if (curPage2 > totalPage2)
            curPage2 = totalPage2;
        //页码小于1
        if (curPage2 < 1)
            curPage2 = 1;
        pageStr2 = "<span>共" + totalPage2 + "页</span><span>" + curPage2 + "/"
            + totalPage2 + "</span>";
        //如果是第一页
        if (curPage2 == 1) {
            pageStr2 += "<span>首页</span><span>上一页</span>";
        } else {
            pageStr2 += "<span><a href='javascript:findAllArticle(1)' rel='1'>首页</a></span><span><a href='javascript:findAllArticle("+(curPage2 - 1)+")' rel='"
                + (curPage2 - 1) + "'>上一页</a></span>";
        }
        //如果是最后页
        if (curPage2 >= totalPage2) {
            pageStr2 += "<span>下一页</span><span>尾页</span>";
        } else {
            pageStr2 += "<span><a href='javascript:findAllArticle("+((curPage2) + 1)+")' rel='"
                + (parseInt(curPage2) + 1)
                + "'>下一页</a></span><span><a href='javascript:findAllArticle("+totalPage2+")' rel='"
                + totalPage2 + "'>尾页</a></span>";
        }
        $("#pageCount").html(pageStr2);
    }
</script>
<div align="center" style="display: flex;justify-content: center">
    <img src="static/img/猴子.png" style="margin-right: 30px;width: 100px;height: 55px">
    <div align="center" style="color: #fc5531;font-size: 50px;font-family: 幼圆;font-weight: bold;line-height: 44px;letter-spacing: 30px">
        用户管理中心</div>

</div>
<div style="background-color: #ffffff">
    <div align="center" style="margin-top: 30px">
        <div style="display: flex;justify-content: center;margin-bottom: 3%">
            <div style="display: flex;justify-content: center;width: 45%">
                <span style="font-family: inherit;color: #fc5531;line-height: 50px;font-weight: bold;font-size: 30px;margin-right: 10px">选择用户:</span>
                <input id="UserName" align="center" style="
                                        width: 75%;
                                        height: 50px;
                                        border-style:dotted;
                                        border-color: #fc5531;
                                       border-radius: 10px;
                                        outline: none;
                                        font-family: inherit;
                                        font-size: 25px;
                                        font-weight: bold;
                                        line-height: inherit;
                                        color: #79bbff;
                                        margin: 0;box-sizing: border-box;">
            </div>
            <div style="display: flex;justify-content: center;width: 30%">
                <button onclick="search()" style="background-color: #fc5531;
                margin-left: 1%;
                border-radius:10px;
                width: 30%;
                height: 50px;
                text-align: center;border: 0px">
                    <span style="color: #fff;font-size: 20px;" >查询</span>
                </button>
                <button onclick="submit()" style="background-color: #fc5531;
                margin-left:5%;
                border-radius:10px;
                width: 30%;
                height: 50px;
                text-align: center;border: 0px">
                    <span style="color: #fff;font-size: 20px">提交</span>
                </button>
                <button onclick="findAll(1)" style="background-color: #79bbff;
                margin-left: 5%;
                border-radius:10px;
                width: 50%;
                height: 50px;
                text-align: center;border: 0px">
                    <span style="display: inline-block;vertical-align: top;color: #fff;font-size: 20px">查看所有用户信息</span>
                </button>
                <button onclick="findAllArticle(1)" style="background-color: #79bbff;
                margin-left: 5%;
                border-radius:10px;
                width: 50%;
                height: 50px;
                text-align: center;border: 0px">
                    <span style="display: inline-block;vertical-align: top;color: #fff;font-size: 20px">查看所有文章信息</span>
                </button>
            </div>

        </div>
    </div>
    <br>


    <div id="showDiv" align="center" style="">
        <table border="1px" width="100%" ></table>
    </div>
    <div class="row" align="center" style="" id="f">
        <div class="col-md-5" style=""></div>
        <div class="col-md-7" id="pageCount" style=""></div>
    </div>
    <div id="err" align="center">
    </div>


</div>

</body>
</html>